<template>
  <div class="hospital-workbench-box">
    <h3 class="order-detail">订单追踪情况</h3>
    <el-tabs
      v-model="activeName"
      @tab-click="stitchTab">
      <el-tab-pane
        v-for="(item, index) in tabsData"
        :key="index"
        :label="item.label"
        :name="item.name">
        <el-container class="order-data-detail">
          <el-steps
            :active="item.active"
            class="order-steps">
            <el-step
              class="single-step"
              @click.native="handleClick(item.active,itemChild.prop)"
              v-for="(itemChild, indexChild) in item.itemProgress"
              :key="indexChild"
              :title="itemChild.title"
              :description="itemChild.description"/>
          </el-steps>
        </el-container>
      </el-tab-pane>
    </el-tabs>

    <h3 class="order-data">订单数据展示</h3>
    <el-tabs
      v-model="date"
      @tab-click="switchOrder">
      <el-tab-pane
        v-for="(item, index) in timeData"
        :key="index"
        :label="item.label"
        :name="item.name">
        <div class="order-data-detail">
          <ul>
            <li>
              <h3>{{ item.paid }}</h3>
              <p>已完成订单总数/笔</p>
            </li>
            <li>
              <h3>{{ item.transaction }}</h3>
              <p>成交总金额/元</p>
            </li>
          </ul>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { queryOrderTrack, queryOrderData } from '@const/api'
import { tabsData, timeData } from './const'

export default {
  data () {
    return {
      activeName: '1',
      date: '1',
      orderTrackObj: {},
      tabsData,
      timeData
    }
  },
  mounted () {
    this.getOrderTrack(this.activeName - 0)
    this.getOrderData(this.date - 0)
  },
  methods: {
    // 查询订单追踪情况
    async getOrderTrack (orderType) {
      // const res = await this.$axios.$get(queryOrderTrack, {
      //   params: {
      //     orderType
      //   }
      // })
      // Object.is(res.code, '0') && (this.tabsData = this.assignArray(this.tabsData, res.payload))
      // res.code !== '0' && this.$message.warning('请求失败！')
    },
    // stitchTab
    stitchTab (tab) {
      Object.is(tab.name, '1') && this.getOrderTrack(tab.name - 0)
      Object.is(tab.name, '2') && this.getOrderTrack(tab.name - 0)
      Object.is(tab.name, '4') && this.getOrderTrack(tab.name - 0)
    },
    // 订单追踪赋值
    assignArray (arr, res) {
      arr.forEach(item => {
        item.itemProgress.forEach(single => {
          Object.is(single.title, '待确认') && (single.description = res.toBeConfirmCount.toString())
          Object.is(single.title, '待发货') && (single.description = res.toBeDeliveredCount.toString())
          Object.is(single.title, '待收货') && (single.description = res.toBeReceiveCount.toString())
          Object.is(single.title, '部分收货') && (single.description = res.someReceiveCount.toString())
          Object.is(single.title, '已拒绝') && (single.description = res.rejectedCount.toString())
          Object.is(single.title, '已完成') && (single.description = res.completedCount.toString())
        })
      })
      return arr
    },
    // 订单数据展示tab
    switchOrder (tab) {
      Object.is(tab.name, '1') && this.getOrderData(tab.name - 0)
      Object.is(tab.name, '2') && this.getOrderData(tab.name - 0)
      Object.is(tab.name, '3') && this.getOrderData(tab.name - 0)
    },
    // 获取订单数据展示
    async getOrderData (type) {
      // const res = await this.$axios.$get(queryOrderData, {
      //   params: {
      //     type
      //   }
      // })
      // Object.is(res.code, '0') && (this.timeData = this.handleOrder(this.timeData, res.payload))
      // res.code !== '0' && this.$message.warning('请求失败！')
    },
    // 出理订单数据
    handleOrder (arr, res) {
      return arr.map((item) => {
        return {
          ...item,
          transaction: res.totalMoney,
          paid: res.completedCount
        }
      })
    },
    // 点击跳转
    handleClick (value, status) {
      switch (value) {
        case 1:
          this.$router.push({
            // path: '/orderManagement/common/orderTracking/wholesaleOrders',
            path: this.$PATH_CONST.order_common_order_whole,
            query: { queryOrderStatus: status }
          })
          break
        case 2:
          this.$router.push({
            // path: '/orderManagement/common/orderTracking/longConsignmentOrder',
            path: this.$PATH_CONST.order_common_order_long,
            query: { queryOrderStatus: status }
          })
          break
        case 4:
          this.$router.push({
            // path: '/orderManagement/common/orderTracking/followOrder',
            path: this.$PATH_CONST.order_common_order_follow,
            query: { queryOrderStatus: status }
          })
          break
        default:
          break
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .hospital-workbench-box {
    background: #fff;
    min-height: 500px;

    .order-detail {
      margin-bottom: 15px;
    }

    .order-data {
      margin-top: 60px;
    }

    .order-data-detail {
      margin-top: 30px;

      .order-steps {
        width: 100%;

        .single-step {
          cursor: pointer;
        }
      }

      ul {
        list-style: none;

        li {
          float: left;
          margin: 0 40px;
          height: 50px;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;

          h3 {
            text-align: center;
          }
        }
      }
    }
  }
</style>
